<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <style>
        .box{
            width:100px;
            height:100px;
            border:1px solid red;
        }
        .bg1{
            background-color: aqua;
        }
        .c1{
            color:blueviolet;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <!-- <div class="wrapper">
        <div class="box">
            <h3 class="bg1">我是标题</h3>
            <p class="c1">我是内容</p>
        </div>
    </div> -->
</body>
<script>
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    
    const oWrapper = React.createElement('div', {className:'wrapper'}, 
        React.createElement('div', {className:'box'}, 
            React.createElement('h3', {className:'bg1'}, '我是标题'),
            React.createElement('p', {className:'c1'}, '我是内容'),
        )
    );

    root.render(oWrapper);
</script>
</html>